<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>form</title>
<link rel="stylesheet" type="text/css" href="css/main.css" />
<link rel="stylesheet" type="text/css" href="css/SyntaxHighlighter.css" />

<script type="text/javascript" src="js/shCore.js"></script>
<script type="text/javascript" src="js/shBrushJScript.js"></script>
<script type="text/javascript" src="js/shBrushXml.js"></script>
</head>
<body style="text-align:left">
<div style="padding:10px">

<h3>Form</h3>
<h4>Usage</h4>
<div class="dp-highlighter"><div class="bar"><div class="tools"></div></div><ol start="1" class="dp-xml"><li class="alt"><span><span class="tag">&lt;</span><span class="tag-name">form</span><span>&nbsp;</span><span class="attribute">id</span><span>=</span><span class="attribute-value">"ff"</span><span>&nbsp;</span><span class="attribute">method</span><span>=</span><span class="attribute-value">"post"</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;...&nbsp;&nbsp;</span></li><li class="alt"><span><span class="tag">&lt;/</span><span class="tag-name">form</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li></ol></div><textarea class="html" name="code-form" style="display: none;">	&lt;form id="ff" method="post"&gt;
		...
	&lt;/form&gt;
</textarea>
<p>To make the form become ajax submit form</p>
<div class="dp-highlighter"><div class="bar"><div class="tools"></div></div><ol start="1" class="dp-c"><li class="alt"><span><span>$(</span><span class="string">'#ff'</span><span>).form({&nbsp;&nbsp;</span></span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;url:...,&nbsp;&nbsp;</span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;onSubmit:&nbsp;<span class="keyword">function</span><span>(){&nbsp;&nbsp;</span></span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="comment">//&nbsp;do&nbsp;some&nbsp;check</span><span>&nbsp;&nbsp;</span></span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="comment">//&nbsp;return&nbsp;false&nbsp;to&nbsp;prevent&nbsp;submit;</span><span>&nbsp;&nbsp;</span></span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;},&nbsp;&nbsp;</span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;success:<span class="keyword">function</span><span>(data){&nbsp;&nbsp;</span></span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;alert(data)&nbsp;&nbsp;</span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;&nbsp;</span></li><li class=""><span>});&nbsp;&nbsp;</span></li><li class="alt"><span><span class="comment">//&nbsp;submit&nbsp;the&nbsp;form</span><span>&nbsp;&nbsp;</span></span></li><li class=""><span>$(<span class="string">'#ff'</span><span>).submit();&nbsp;&nbsp;</span></span></li></ol></div><textarea class="js" name="code-form" style="display: none;">	$('#ff').form({
		url:...,
		onSubmit: function(){
			// do some check
			// return false to prevent submit;
		},
		success:function(data){
			alert(data)
		}
	});
	// submit the form
	$('#ff').submit();
</textarea>
<p>To do a submit action</p>
<div class="dp-highlighter"><div class="bar"><div class="tools"></div></div><ol start="1" class="dp-c"><li class="alt"><span><span class="comment">//&nbsp;call&nbsp;'submit'&nbsp;method&nbsp;of&nbsp;form&nbsp;plugin&nbsp;to&nbsp;submit&nbsp;the&nbsp;form</span><span>&nbsp;&nbsp;</span></span></li><li class=""><span>$(<span class="string">'#ff'</span><span>).form(</span><span class="string">'submit'</span><span>,&nbsp;{&nbsp;&nbsp;</span></span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;url:...,&nbsp;&nbsp;</span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;onSubmit:&nbsp;<span class="keyword">function</span><span>(){&nbsp;&nbsp;</span></span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="comment">//&nbsp;do&nbsp;some&nbsp;check</span><span>&nbsp;&nbsp;</span></span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="comment">//&nbsp;return&nbsp;false&nbsp;to&nbsp;prevent&nbsp;submit;</span><span>&nbsp;&nbsp;</span></span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;},&nbsp;&nbsp;</span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;success:<span class="keyword">function</span><span>(data){&nbsp;&nbsp;</span></span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;alert(data)&nbsp;&nbsp;</span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;&nbsp;</span></li><li class="alt"><span>});&nbsp;&nbsp;</span></li></ol></div><textarea class="js" name="code-form" style="display: none;">	// call 'submit' method of form plugin to submit the form
	$('#ff').form('submit', {
		url:...,
		onSubmit: function(){
			// do some check
			// return false to prevent submit;
		},
		success:function(data){
			alert(data)
		}
	});
</textarea>

<h4>Properties</h4>
<table class="doc-table">
<tbody><tr>
<th><strong>Name</strong></th>
<th><strong>Type</strong></th>
<th><strong>Description</strong></th>
<th><strong>Default</strong></th>

</tr>
<tr>
<td>url</td>
<td>string</td>
<td>The form action URL to submit</td>
<td>null</td>
</tr>
</tbody></table>

<h4>Events</h4>
<table class="doc-table">
<tbody><tr>
<th><strong>Name</strong></th>
<th><strong>Parameters</strong></th>
<th><strong>Description</strong></th>
</tr>
<tr>
<td>onSubmit</td>
<td>none</td>

<td>Fires before submit, return false to prevent submit action.</td>
</tr>
<tr>
<td>success</td>
<td>data</td>
<td>Fires when the form is submitted successfuly.</td>
</tr>
<tr>
<td>onBeforeLoad</td>
<td>param</td>
<td>Fires before a request is made to load data. Return false to cancel this action.</td>

</tr>
<tr>
<td>onLoadSuccess</td>
<td>data</td>
<td>Fires when the form data is loaded.</td>
</tr>
<tr>
<td>onLoadError</td>
<td>none</td>
<td>Fires when some errors occur while loading form data.</td>
</tr>

</tbody></table>

<h4>Methods</h4>
<table class="doc-table">
<tbody><tr>
<th><strong>Name</strong></th>
<th><strong>Parameter</strong></th>
<th><strong>Description</strong></th>

</tr>
<tr>
<td>submit</td>
<td>options</td>
<td>Do the submit action, the options parameter is a object which contains following properties:<br>
url: the action URL<br>
onSubmit: callback function before submit<br>
success: callback function after submit successfuly<br></td>
</tr>
<tr>
<td>load</td>

<td>data</td>
<td>Load records to fill the form.<br>
The data parameter can be a string or a object type, when string acts as a remote URL, otherwise acts as a local record</td>
</tr>
<tr>
<td>clear</td>
<td>none</td>
<td>Clear the form data</td>
</tr>
<tr>
<td>validate</td>

<td>none</td>
<td>Do the form fields validation, return true when all fields is valid. The method is used with the validatebox plugin.</td>
</tr>
</tbody></table>

</div>	
</body>
</html>